<template>
  <div class="analysis">
    <a-row style="margin-top: 0" :gutter="[24, 24]">
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" title="累计客户数量" :total="crmanalysis.customerTotal">
          <a-tooltip title="累计客户数量" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend style="margin-right: 16px" term="同期客户数量" :percent="12" :is-increase="false" :scale="0" />
          </div>
          <div slot="footer">本月新增客户数量<span> {{ crmanalysis.customerAdd }}</span></div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" title="累计项目数量" :total="crmanalysis.projectTotal">
          <a-tooltip title="累计项目数量" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar />
          </div>
          <div slot="footer">本月新增项目数量<span> {{ crmanalysis.projectAdd }}</span></div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" title="累计合同总额" total="￥ 1005">
          <a-tooltip title="累计合同总额" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <trend style="margin-right: 16px" term="同周比" :percent="50" :is-increase="true" :scale="0" />
          </div>
          <div slot="footer">本月新增收款额<span>￥ 8</span></div>
        </chart-card>
      </a-col>
      <a-col :sm="24" :md="12" :xl="6">
        <chart-card :loading="loading" title="累计开票总额" total="￥ 1005">
          <a-tooltip title="累计开票总额" slot="action">
            <a-icon type="info-circle-o" />
          </a-tooltip>
          <div>
            <mini-bar />
          </div>
          <div slot="footer">本月新增开票额<span>￥ 886</span></div>
        </chart-card>
      </a-col>
    </a-row>
    <a-card :loading="loading" style="margin-top: 24px" :bordered="false" :body-style="{padding: '24px'}">
      <div class="salesCard">
        <a-tabs default-active-key="0" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
          <a-tab-pane tab="客户数量" key="0">
            <a-row>
              <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                <GroupBar title="同期客户数量" />
              </a-col>
              <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                <ranking-list title="TOP10客户" :list="rankList"/>
              </a-col>
            </a-row>
          </a-tab-pane>
          <a-tab-pane loading="true" tab="项目统计" key="1">
              <bar title="本月新增项目数量" />
          </a-tab-pane>
          <a-tab-pane tab="开票统计" key="2">
            <bar title="本月新增开票额" />
          </a-tab-pane>
          
        </a-tabs>
      </div>
    </a-card>
  </div>
  
</template>

<script>
import ChartCard from '@/components/card/ChartCard'
import Trend from '@/components/chart/Trend'
import MiniBar from '@/components/chart/MiniBar'
import Bar from '@/components/chart/Bar'
import GroupBar from '@/components/chart/GroupBar'
import RankingList from '@/components/chart/RankingList'
import { getAction} from '@/services/manage'

export default {
  name: 'CrmAnalysis',
  components: {
    ChartCard,
    Trend,
    MiniBar,
    Bar,
    GroupBar,
    RankingList
  },
  data() {
    return {
      loading: true,
      crmanalysis: {

      },
      rankList: []
    }
  },
  mounted() {
    this.loadDate()
  },
  methods: {
    loadDate(){
      getAction('/report/analysis').then((res) => {
        if (res.success) {
          this.crmanalysis = res.result.content || res.result
        }
        
      }).finally(() => {
        this.loading = false
      })
      getAction('/report/contacttop10').then((res) => {
        console.log('11111111',res)
        if (res.success) {
          let result = res.result.content || res.result
          let list = [];
          result.map(item =>{
            list.push({
              name: item.customerName,
              total: item.money
            })
          })
          this.rankList = list
        }
        
      }).finally(() => {
        this.loading = false
      })
    }
  }
}
</script>